<template>
    <div class="glo-coll-pay-body">

        <FullHeadImg backImage="global/global_coll_bg.png">
            <template #default>
                <h1>
                    Expand your business reach by tapping into the world’s most inclusive and diverse payment ecosystem.
                    Discover our Global Collection & Payout coverage
                </h1>
            </template>
        </FullHeadImg>

        <MapView mapType='globalCollectionPayout' />
        <section class="glo-coll-pay-center full-bg">
            <div class="glo-coll-pay-content body-m">
                <p class="glo-coll-pay-map-desc">Our solution bridges the gap between traditional and modern
                    payment
                    methods, ensuring your business can
                    transact effortlessly, no matter where you are. With our global payment network, you can confidently
                    expand and operate across international markets, empowering your business to thrive globally.
                </p>
                <img :src="getImage('global/global_coll_pic.png')" alt="">
            </div>
        </section>

        <section class="glo-coll-pay-cards body-m">
            <div class="card-item" v-for="(item, idx) in cardDatas" :key="idx">
                <img v-if="idx % 2 === 0 || isSmallScreen" :src="getImage(item.image)" alt="">
                <div class="card-content">
                    <h3>{{ item.title }}</h3>
                    <p>{{ item.desc }}</p>
                </div>
                <img v-if="idx % 2 !== 0 && !isSmallScreen" :src="getImage(item.image)" alt="">
            </div>
        </section>
        <ReadyGetStart />
        <div></div>
    </div>
</template>

<script setup lang="ts" name="name">
import MapView from '@/components/MapView.vue';
import ReadyGetStart from '@/components/ReadyGetStart.vue';
import { useScreenSize } from '@/utils/useScreenSize';
const { isSmallScreen } = useScreenSize()

const cardDatas = [
    {
        title: 'Do Business Without Borders',
        desc: 'Take your business global without the complexities of traditional cross-border payments. We provide a unified platform that allows you to send and receive payments globally while optimizing for speed, convenience, and cost.',
        image: 'global/global_coll_card1.png'
    },
    {
        title: 'Unleash Global Potential',
        desc: 'Whether you’re paying suppliers or collecting payments from customers worldwide, our solution provides the tools to do so with ease. Unlock new markets and streamline treasury management while ensuring maximum efficiency.',
        image: 'global/global_coll_card2.png'
    }
]

</script>

<style scoped lang="scss">
.glo-coll-pay-body {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.glo-coll-pay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 0;

    .glo-coll-pay-map-desc {
        text-align: center;
        font-size: 1.1rem;
    }

    img {
        width: 90%;
        object-fit: cover;
        border-radius: 1rem;
    }
}

.glo-coll-pay-cards {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;

    .card-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;

        img {
            width: 45%;
            object-fit: cover;
            border-radius: 1rem;
        }

        .card-content {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
    }
}


@media (max-width: 650px) {
    .glo-coll-pay-body {
        gap: 2rem;
    }

    .glo-coll-pay-content {
        img {
            width: 100%;
        }
    }

    .glo-coll-pay-cards {

        .card-item {
            flex-direction: column;

            img {
                width: 90%;
            }


            .card-content {
                align-items: center;
            }
        }
    }
}
</style>